<template>
	<div id="onlineresume">
		<Top></Top>
		<div class="wrap clearfixed">
			<div class="resume-left">
				<!--基础信息-->
				<div class="resume-base clearfixed">
					<div class="resume-base-top">
						<p class="refresh-time">最后更新 2020.05.30 08:00</p>
						<a href="javascript:;" class="look-resume">预览简历</a>
					</div>

					<div class="write-base-box" v-if="!writebase">
						<div class="resume-base-left">
							<span class="name">张三</span><i class="iconfont icon-nan cus-sexcss"></i>
							<div class="base-info-box">
								<span class="base-item" v-for="(item,index) in baseinfoData" :key="index"><i :class="item.icon"></i>{{item.title}}</span>
							</div>
						</div>
						<div class="resume-base-right">
							<a href="javascript:;" class="person-head">
								<img src="../../static/img/hr2.jpg" alt="" />
								<i class="el-icon-camera"></i>
							</a>
							<a href="javascript:;" class="edit-resume" @click="editBaseInfo"><i class="el-icon-edit"></i>编辑</a>
						</div>
					</div>
					<div class="write-base-info" v-if="writebase">
						<div class="write-title">编辑个人信息</div>
						<el-form label-position="top" label-width="80px" :model="baseform">
							<el-form-item label="姓名">
								<el-input v-model="baseform.name"></el-input>
							</el-form-item>
							<el-form-item label="性别">
								<!--<el-input v-model="baseform.sex"></el-input>-->
								<div style="margin-top: 0px">
									<el-radio v-model="baseform.sex" label="1" border size="medium">男</el-radio>
									<el-radio v-model="baseform.sex" label="2" border size="medium">女</el-radio>
								</div>
							</el-form-item>
							<el-form-item label="身份">
								<!--<el-input v-model="baseform.definer"></el-input>-->
								<el-select v-model="baseform.definer" clearable placeholder="请选择" style="width:100%">
									<el-option v-for="item in definerdata" :key="item.value" :label="item.value" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="参加工作时间">
								<!--<el-input v-model="baseform.jobtimer"></el-input>-->
								 <el-date-picker type="date" placeholder="选择参加工作时间" v-model="baseform.jobtimer" style="width: 100%;"></el-date-picker>
							</el-form-item>
							<el-form-item label="出生日期" required>
								 <el-date-picker type="date" placeholder="选择出生日期" v-model="baseform.birth" style="width: 100%;"></el-date-picker>
								<!--<el-input v-model="baseform.birth"></el-input>-->
							</el-form-item>
							<el-form-item label="优势">
								<el-input v-model="baseform.advantage"></el-input>
							</el-form-item>

							<el-form-item align="right" style="width:100%">
								<el-button @click="offsetBtn()" size="medium">取消</el-button>
								<el-button type="primary" @click="successBtn()" size="medium">完成</el-button>
							</el-form-item>
						</el-form>

					</div>
				</div>

				<ul class="orther-info-list">
					<li>
						<div class="info-title">
							<span>个人优势</span>
							<!--<a href="javascript:;" class="add-info"><i class="el-icon-plus"></i>添加</a>-->
						</div>
						<div class="info-content">
							<p>成都旺小宝科技有限公司成立于2015年，（公司前身向源叁际2009年在北京成立，后受成都高新区政府邀请，总部迁回成都。）致力于扎根地产行业的人工智能科技公司，是国内地产行业最大的“新楼盘AI IOT+SAAS+大数据营销”平台公司.</p>
							<a href="javascript:;" class="edit-info"><i class="el-icon-edit"></i>编辑</a>
						</div>
					</li>
					<li>
						<div class="expect-position" v-if="!writexpectposition">
							<div class="info-title">
								<span>求职期望</span>
								<!--<a href="javascript:;" class="add-info"><i class="el-icon-plus"></i>添加</a>-->
							</div>
							<div class="info-content expect-content">
								<div class="job-require">
									<span><i class="el-icon-s-data"></i>期望职位</span>
									<span><i class="el-icon-house"></i>期望行业</span>
									<span><i class="iconfont icon-location"></i>工作城市</span>
									<span><i class="iconfont icon-jinqian"></i>薪资要求</span>
								</div>
								<a href="javascript:;" class="edit-info" @click="editExpectPosition"><i class="el-icon-edit"></i>编辑</a>
							</div>
						</div>
						<div class="write-expect-position">
							<div class="write-base-info write-expect-job" v-if="writexpectposition">
								<div class="write-title">编辑求职期望</div>
								<el-form label-position="top" label-width="80px" :model="expectform">
									<el-form-item label="期望职位">
										<el-input v-model="expectform.exzhiwei"></el-input>
									</el-form-item>
									<el-form-item label="期望行业">
										<el-input v-model="expectform.exhangye"></el-input>
									</el-form-item>
									<el-form-item label="工作城市">
										<el-input v-model="expectform.workcity"></el-input>
									</el-form-item>
									<el-form-item label="薪资要求">
										<!--<el-input v-model="expectform.salary"></el-input>-->
										<el-select v-model="expectform.salary1" placeholder="请选择">
											<el-option v-for="item in salary1" :key="item.value" :label="item.label" :value="item.value">
											</el-option>
										</el-select>
										<span class="exzhi">至</span>
										<el-select v-model="expectform.salary2" placeholder="请选择">
											<el-option v-for="item in salary2" :key="item.value" :label="item.label" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item align="right" style="width:100%">
										<el-button @click="offsetBtn()" size="medium">取消</el-button>
										<el-button type="primary" @click="successBtn()" size="medium">完成</el-button>
									</el-form-item>
								</el-form>
							</div>
						</div>
					</li>

					<!--工作经历-->
					<li>
						<div class="work-exercise" v-if="!workexer">
							<div class="info-title">
								<span>工作经历</span>
								<a href="javascript:;" class="add-info" @click="addWorkExer"><i class="el-icon-plus"></i>添加</a>
							</div>
							<div class="info-content1 workexer-content">
								<!--<div class="job-require">
									<span><i class="el-icon-s-data"></i>期望职位</span>
									<span><i class="el-icon-house"></i>期望行业</span>
									<span><i class="iconfont icon-location"></i>工作城市</span>
									<span><i class="iconfont icon-jinqian"></i>薪资要求</span>
								</div>
								<a href="javascript:;" class="edit-info" @click="editExpectPosition"><i class="el-icon-edit"></i>编辑</a>-->
							</div>
						</div>
						<div class="write-job-exercise write-expect-position">
							<div class="write-base-info write-expect-job" v-if="workexer">
								<div class="write-title">编辑求职期望</div>
								<el-form label-position="top" label-width="80px" :model="expectform">
									<el-form-item label="公司名称">
										<el-input v-model="expectform.exzhiwei" placeholder="例如：万科科技有限公司"></el-input>
									</el-form-item>
									<el-form-item label="所属行业">
										<el-input v-model="expectform.exhangye" placeholder="选择所属行业"></el-input>
									</el-form-item>
									<el-form-item label="所属部门">
										<el-input v-model="expectform.workcity" placeholder="例如：产品部"></el-input>
									</el-form-item>
									<el-form-item label="职位名称">
										<el-input v-model="expectform.workcity" placeholder="例如：Web前端工程师"></el-input>
									</el-form-item>
									<el-form-item label="职位类型">
										<el-input v-model="expectform.workcity" placeholder="选择职位"></el-input>
									</el-form-item>
									<el-form-item label="在职时间">
										<el-select v-model="expectform.salary1" placeholder="选择在职时间">
											<el-option v-for="item in salary1" :key="item.value" :label="item.label" :value="item.value">
											</el-option>
										</el-select>
										<span class="exzhi">至</span>
										<el-select v-model="expectform.salary2" placeholder="选择在职时间">
											<el-option v-for="item in salary2" :key="item.value" :label="item.label" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="工作内容" class="work-common work-content">
										<!--<el-input v-model="expectform.workcity"></el-input>-->
										<textarea></textarea>
									</el-form-item>
									<el-form-item label="工作业绩" class="work-common work-yeji">
										<!--<el-input v-model="expectform.workcity"></el-input>-->
										<textarea></textarea>

									</el-form-item>
									<el-form-item align="right" style="width:100%">
										<el-button @click="offsetBtn()" size="medium">取消</el-button>
										<el-button type="primary" @click="successBtn()" size="medium">完成</el-button>
									</el-form-item>
								</el-form>
							</div>
						</div>
					</li>

					<!--项目经验-->
					<li>
						<div class="project-exercise" v-if="!projectexer">
							<div class="info-title">
								<span>项目经验</span>
								<a href="javascript:;" class="add-info" @click="addProject"><i class="el-icon-plus"></i>添加</a>
							</div>

						</div>
						<div class="write-expect-position write-project-exercise">
							<div class="write-base-info write-expect-job" v-if="projectexer">
								<div class="write-title">添加项目经历</div>
								<el-form label-position="top" label-width="80px" :model="projectform">
									<el-form-item label="项目名称">
										<el-input v-model="projectform.name" placeholder="例如：直聘网"></el-input>
									</el-form-item>
									<el-form-item label="项目角色">
										<el-input v-model="projectform.role" placeholder="例如：UI设计师"></el-input>
									</el-form-item>
									<el-form-item label="项目链接" class="project-link">
										<el-input v-model="projectform.link" placeholder="例如：直聘网"></el-input>
									</el-form-item>
									<el-form-item label="项目开始时间" class="project-time">
										<el-date-picker type="date" placeholder="选择日期" v-model="projectform.timestart" style="width: 45%;"></el-date-picker>
										<span class="projectzhi">至</span>
										<el-date-picker type="date" placeholder="选择日期" v-model="projectform.timeend" style="width: 45%;"></el-date-picker>
									</el-form-item>
									<el-form-item label="项目描述">
										<el-input v-model="projectform.desc"></el-input>
									</el-form-item>
									<el-form-item label="项目业绩">
										<el-input v-model="projectform.grade"></el-input>
									</el-form-item>
									<el-form-item align="right" style="width:100%">
										<el-button @click="offsetBtn()" size="medium">取消</el-button>
										<el-button type="primary" @click="successBtn()" size="medium">完成</el-button>
									</el-form-item>
								</el-form>
							</div>
						</div>
					</li>

					<!--教育经历-->
					<li>
						<div class="project-exercise education-exer" v-if="!education">
							<div class="info-title">
								<span>教育经历</span>
								<a href="javascript:;" class="add-info" @click="addeducation"><i class="el-icon-plus"></i>添加</a>
							</div>
						</div>
						<div class="write-expect-position">
							<div class="write-base-info write-expect-job" v-if="education">
								<div class="write-title">添加教育经历</div>
								<el-form label-position="top" label-width="80px" :model="educationform">
									<el-form-item label="学校名称">
										<el-input v-model="educationform.schoolname" placeholder="例如：清华大学"></el-input>
									</el-form-item>
									<el-form-item label="学历">
										<el-input v-model="educationform.educationbg" placeholder="选择学历"></el-input>
									</el-form-item>
									<el-form-item label="专业">
										<el-input v-model="educationform.major" placeholder="例如：计算机科学与技术"></el-input>
									</el-form-item>
									<!--<el-form-item label="时间段">
										<el-select v-model="educationform.timestart" placeholder="选择年份">
											<el-option v-for="item in salary1" :key="item.value" :label="item.label" :value="item.value">
											</el-option>
										</el-select>
										<span class="exzhi">至</span>
										<el-select v-model="educationform.timeend" placeholder="选择年份">
											<el-option v-for="item in salary2" :key="item.value" :label="item.label" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>-->
									<el-form-item label="时间段" class="project-time">
										<el-date-picker type="date" placeholder="选择日期" v-model="educationform.timestart" style="width: 45%;" @change="eduTimeChange"></el-date-picker>
										<span class="projectzhi">至</span>
										<el-date-picker type="date" placeholder="选择日期" v-model="educationform.timeend" style="width: 45%;" :disabled="isdisabled"></el-date-picker>
									</el-form-item>
									<el-form-item label="在校经历" class="work-common">
										<textarea v-model="educationform.schoolexer"></textarea>
									</el-form-item>
									<el-form-item align="right" style="width:100%">
										<el-button @click="offsetBtn()" size="medium">取消</el-button>
										<el-button type="primary" @click="successBtn()" size="medium">完成</el-button>
									</el-form-item>
								</el-form>
							</div>
						</div>
					</li>

					<!--资格证书-->
					<li>
						<div class="project-exercise credentials" v-if="!credentials">
							<div class="info-title">
								<span>资格证书</span>
								<a href="javascript:;" class="add-info" @click="addcredentials"><i class="el-icon-plus"></i>添加</a>
							</div>
						</div>
						<div class="write-expect-position">
							<div class="write-base-info write-expect-job" v-if="credentials">
								<div class="write-title">添加资格证书</div>
								<el-form label-position="top" label-width="80px" :model="credentialsform">
									<el-form-item label="证书类型">
										<el-input v-model="credentialsform.type" placeholder="例如：英语类"></el-input>
									</el-form-item>
									<el-form-item label="证书名称">
										<el-input v-model="credentialsform.name" placeholder="例如：大学英语四级"></el-input>
									</el-form-item>
									<el-form-item label="获取时间">
										 <el-date-picker type="date" placeholder="选择获取证书的时间" v-model="credentialsform.time" style="width: 100%;"></el-date-picker>
									</el-form-item>
									<el-form-item align="right" style="width:100%">
										<el-button @click="offsetBtn()" size="medium">取消</el-button>
										<el-button type="primary" @click="successBtn()" size="medium">完成</el-button>
									</el-form-item>
								</el-form>
							</div>
						</div>
					</li>
				</ul>
			</div>

			<div class="resume-right">
				<div class="orther-mananger resume-right-commonbox">
					<span>附件管理</span>
					<div class="upload-resume">
						<p><i class="el-icon-document cus-icon1"></i>Web前端开发工程师_张三<i class="el-icon-delete cus-icon2"></i></p>
						<div class="resume-box">
							<div class="resume-box-top">
								<img src="../../static/img/pdf-img.jpg" alt="" />
								<div class="resume-box-pdf">
									<p>Web前端开发工程师_张三.pdf</p>
									<span>54.8KB 2020.05.25 19:17 上传</span>
								</div>
							</div>
							<div class="resume-box-bottom">
								<span class="rename">重命名</span>
								<span class="uploading">下载</span>
							</div>
						</div>
					</div>
					<a href="javascript:;" class="upload-resume-btn">上传简历</a>
				</div>
				<ul class="private-setting-list resume-right-commonbox">
					<li>
						<span>隐私设置</span>
						<a href="javascript:;" class="setting-private">设置</a>
					</li>
					<li>
						<span>简历设置</span>
						<span class="setting-value">对外开放</span>
					</li>
					<li class="mask-company">
						<span>屏蔽公司</span>
						<span class="setting-value">已屏蔽一个</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import Top from './top'
	export default {
		components: {
			Top
		},
		data() {
			return {
				writebase: false, //默认基本信息填写框为隐藏
				writexpectposition: false, //默认基本信息填写框为隐藏
				workexer: false, //工作经历
				projectexer: false, //项目经验
				education: false, //教育经验
				credentials: false, //资格证书
				baseform: {
					name: '',
					sex: '',
					definer: '',
					jobtimer: '',
					birth: '',
					advantage: ''
				},
				definerdata: [{
					value: '求职者'
				}, {
					value: '招聘者'
				}],
				//求职期望
				expectform: {
					exzhiwei: '',
					exhangye: '',
					workcity: '',
					salary: ''
				},
				salary1: [{
						label: '面议',
						value: ''
					},
					{
						label: '1k',
						value: '1000'
					},
					{
						label: '2k',
						value: '2000'
					},
					{
						label: '3k',
						value: '3000'
					},
					{
						label: '4k',
						value: '4000'
					}
				],
				salary2: [{
						label: '2k',
						value: '2000'
					},
					{
						label: '3k',
						value: '3000'
					},
					{
						label: '4k',
						value: '4000'
					},
					{
						label: '5k',
						value: '5000'
					},
					{
						label: '6k',
						value: '6000'
					}
				],
				//添加项目经验
				projectform: {
					name:'',
					role:'',
					link:'',
					timestart:'',
					timeend:'',
					desc:'',
					grade:''
				},
				//教育经历
				educationform: {
					schoolname: '',
					educationbg: '',
					major: '',
					timestart: '',
					timeend: '',
					schoolexer: ''
				},
				//教育开始时间
				isdisabled:true,
				credentialsform: {
					type: '',
					name: '',
					time: ''
				},
				dialogVisible: false,
				baseinfoData: [{
						'icon': 'el-icon-collection-tag',
						'title': '20年应届生'
					},
					{
						'icon': 'el-icon-house',
						'title': '本科学历'
					},
					{
						'icon': 'el-icon-brush',
						'title': '离校-随时到岗'
					},
					{
						'icon': 'iconfont icon-dianhuahaoma',
						'title': '15889655768'
					},
					{
						'icon': 'iconfont icon-45-weixin-xiaoxi',
						'title': '1568889968'
					}
				]
			}
		},
		methods: {
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			editBaseInfo() {
				//this.dialogVisible = true;
				this.writebase = true;

			},
			//取消基本信息事件
			offsetBtn() {
				this.writebase = false;
				this.writexpectposition = false;
				this.workexer = false;
				this.projectexer = false;
				this.education = false;
				this.credentials = false;
			},
			successBtn() {

			},
			editExpectPosition() {
				this.writexpectposition = true;
			},

			//添加
			addWorkExer() {
				this.workexer = true;
			},

			//添加项目经验
			addProject() {
				this.projectexer = true;
			},
			//添加教育经验
			addeducation() {
				this.education = true;
			},
			//设置开始时间
			eduTimeChange(){
				this.isdisabled = false;
			},
			//添加资格证书
			addcredentials() {
				this.credentials = true;
			}
		}
	}
</script>

<style>
	.write-base-info .el-form--label-top .el-form-item__label {
		padding: 0;
	}
</style>
<style scoped>
	@import '../assets/css/resume.css';
</style>